{# One document in the drawer: what it is, its pages as extraction stored
   them (a page opens its preview), the edit form, and its tags. Read pages
   hands it to the worker; the pages fill in on the next open. #}
{% from "components/macros/layout.html" import card, dialog_title, facts %}
{% from "components/macros/form.html" import action, field, text_input, textarea, date_input, primary_button, select %}
<div class="space-y-4">
  {{ dialog_title(document.title, facts=[document.kind, details[2][1], (document.page_count or 0) ~ " pages"]|join(" . ")) }}
  <div class="flex flex-wrap items-center gap-2">
    {{ action("Read pages", 'hx-post="' ~ urls.read ~ '" hx-swap="none" data-api-done="Reading started"', "primary") }}
    <a href="{{ urls.download }}" download class="px-2.5 py-1 text-xs rounded border border-aegis-border text-aegis-muted hover:text-aegis-text hover:border-aegis-muted transition-colors">Download</a>
    {{ action("Delete", hx_dialog(urls.delete), "danger") }}
  </div>
  <section id="document-pages" aria-label="Pages" class="flex flex-wrap gap-2">
    {% for p in pages %}
    <button type="button" {{ hx_dialog(p.preview) }} title="Page {{ p.number }}: {{ p.status }}"
            class="w-16 h-20 rounded border border-aegis-border bg-aegis-bg overflow-hidden flex items-center justify-center text-xs text-aegis-muted hover:border-aegis-teal transition-colors{{ ' opacity-50' if p.status != 'read' }}">
      {% if p.image %}<img src="{{ p.image }}" alt="Page {{ p.number }}" width="64" height="80" loading="lazy" class="w-full h-full object-cover object-top">{% else %}{{ p.number }}{% endif %}
    </button>
    {% else %}
    <p class="text-xs text-aegis-muted">Not read yet. Read pages hands it to the worker.</p>
    {% endfor %}
  </section>
  {% call card("Details", id="document-facts") %}{{ facts(details) }}{% endcall %}
  {% call card("Edit") %}
  <form hx-post="{{ urls.save }}" hx-swap="none" class="space-y-4">
    {% call field("Title") %}{{ text_input("title", document.title, required=True) }}{% endcall %}
    <div class="grid grid-cols-2 gap-3">
      {% call field("Kind") %}{{ select("kind", kind_options, document.kind, blank=None, block=True) }}{% endcall %}
      {% call field("Dated") %}{{ date_input("document_date", document.document_date, block=True) }}{% endcall %}
    </div>
    {% call field("Note") %}{{ textarea("note", document.note or "", rows=3) }}{% endcall %}
    {{ primary_button("Save", type="submit") }}
  </form>
  {% endcall %}
  {% call card("Tags", id="document-tags") %}
  <div class="flex flex-wrap items-center gap-2">
    {% for label in tags %}
    <span class="inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded border border-aegis-border text-aegis-text">{{ label }}
      <button type="button" aria-label="Remove {{ label }}" hx-delete="{{ urls.tags }}/{{ label|urlencode }}" hx-swap="none" data-api-done="Tag removed" class="text-aegis-muted hover:text-error">×</button></span>
    {% endfor %}
    <form hx-post="{{ urls.tags }}" hx-swap="none" class="inline-flex items-center gap-2">
      <input type="text" name="label" required placeholder="Add a tag" class="bg-aegis-bg border border-aegis-border rounded px-2 py-1 text-xs text-aegis-text w-32">
    </form>
  </div>
  {% endcall %}
</div>